<script setup>
import logo from '@/assets/icons/logo.svg';
import { useI18nStore } from '@/stores';
const i18nStore = useI18nStore();
watch(
  () => i18nStore.translate,
  () => {
    updatelist();
  }
);
onMounted(() => {
  updatelist();
});
const updatelist = () => {
  list.value = [
    {
      title: i18nStore.translate('index6'),
      content: [
        {
          text: i18nStore.translate('index3'),
          to: 'myFiles'
        },
        {
          text: i18nStore.translate('index4'),
          to: 'userInfo'
        },
        {
          text: i18nStore.translate('index5'),
          to: 'mySharedItems'
        }
      ]
    },
    {
      title: i18nStore.translate('index7'),
      content: [
        {
          text: i18nStore.translate('index8'),
          to: 'plan'
        }
      ]
    },
    // {
    //   title: "平台",
    //   content: [
    //     {
    //       text: "文案文案",
    //     },
    //     {
    //       text: "文案文案",
    //     },
    //     {
    //       text: "文案文案",
    //     },
    //   ],
    // },
    {
      title: i18nStore.translate('index9'),
      content: [
        {
          text: i18nStore.translate('index10'),
          to: 'aboutUs'
        },
        {
          text: i18nStore.translate('index11'),
          to: 'userAgreement'
        },
        {
          text: i18nStore.translate('index12'),
          to: 'privacyAgreement'
        }
      ]
    },

    {
      title: i18nStore.translate('index13'),
      content: [
        {
          text: i18nStore.translate('index14'),
          to: 'help'
        },
        {
          text: i18nStore.translate('index15'),
          to: 'contactUs'
        }
      ]
    }
    // {
    //   title: "法律",
    //   content: [
    //     {
    //       text: "服务条款",
    //     },
    //     {
    //       text: "隐私政策",
    //     },
    //     {
    //       text: "版权争议",
    //     },
    //   ],
    // },
  ];
};
const list = ref([]);
</script>

<template>
  <div class="footer flex justify-between px-[50px] pb-[70px] mobile:hidden">
    <div class="left w-[300px] mr-[180px] text-center">
      <div class="logo w-[70px] h-[70px]">
        <img :src="logo" alt="" class="w-[70px] h-[70px]" />
      </div>
      <p class="mt-[30px] mb-[16px] text-[#888888] text-[16px]">
        {{ i18nStore.translate('index1') }}
      </p>
      <p class="text-[#888888] text-[16px]">
        {{ i18nStore.translate('index2') }}
      </p>
    </div>
    <div class="right w-[600px] flex justify-between flex-wrap">
      <div v-for="i in list" class="mr-[100px] mb-[30px]">
        <ul>
          <li class="font-bold text-[#333333] text-[22px] mb-[10px]">
            {{ i.title }}
          </li>
          <li
            class="text-[#888888] text-[16px] leading-[30px]"
            v-for="t in i.content"
          >
            <router-link :to="{ name: t.to }">
              {{ t.text }}
            </router-link>
          </li>
          <!-- <li class="text-[#888888] text-[16px] leading-[30px]">存储空间</li>
          <li class="text-[#888888] text-[16px] leading-[30px]">公开分享</li> -->
        </ul>
      </div>
    </div>
  </div>

  <div class="footer pc:hidden pb-[70px]">
    <div class="content">
      <Accordion expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
        <AccordionTab
          style="border-bottom: 1px solid #e9ecef"
          v-for="i in list"
        >
          <template #header>
            <span class="flex align-items-center gap-2 w-full">
              <span class="font-bold white-space-nowrap">{{ i.title }}</span>
            </span>
          </template>
          <p class="text-[#888888]" v-for="t in i.content">
            <router-link :to="{ name: t.to }">{{ t.text }}</router-link>
          </p>
        </AccordionTab>
      </Accordion>
    </div>
    <div class="w-full text-center mt-[60px]">
      <div class="logo w-[70px] h-[70px] cursor-pointer">
        <router-link to="/mySmallfiles">
          <img :src="logo" alt="" class="w-[70px] h-[70px]" />
        </router-link>
      </div>
      <p class="mt-[20px] text-[#888888] text-[12px]">
        {{ i18nStore.translate('index1') }}
      </p>
      <p class="text-[#888888] text-[12px]">
        {{ i18nStore.translate('index2') }}
      </p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.logo {
  margin: 0 auto;
}
</style>
